<template>
	<div class="minecontent">
		<van-nav-bar title="我的" left-text="返回" right-text="按钮" left-arrow>
			<template #right>
				<van-icon name="setting-o" size="20" color="#000" />
			</template>
		</van-nav-bar>
		<!-- 基本信息 -->
		<div class="minetop">
			<div class="imgs">
				<van-image width="60" height="60" :src="userimg" round />
			</div>
			<div class="mines">
				<p>
					昵称:<span>{{ name }}</span>
				</p>
				<p>
					登录账号:<span>{{ username }}</span>
				</p>
				<p>
					个性签名：<span>{{ signatures }}</span>
				</p>
			</div>
		</div>
		<!-- 关注、足迹 -->
		<div class="minetwo">
			<van-row type="flex" justify="space-around">
				<van-col span="8">
					<p>68</p>
					<p>收藏夹</p>
				</van-col>
				<van-col span="8">
					<p>68</p>
					<p>关注店铺</p>
				</van-col>
				<van-col span="8">
					<p>68</p>
					<p>足迹</p>
				</van-col>
			</van-row>
		</div>
		<!-- 用户购买商品信息 -->
		<div class="minelast">
			<van-list>
				<van-cell
					v-for="item in minelist"
					:key="item.content"
					:title="item.content"
					:to="item.path"
					is-link
				/>
			</van-list>
		</div>
		<van-button type="primary" round @click="logout">退出登录</van-button>
	</div>
</template>

<script>
export default {
	data() {
		return {
			minelist: [
				{
					content: "我的订单",
					path: "/order",
				},
				{
					content: "我的地址",
					path: "/address",
				},
				{
					content: "我的信息",
					path: "/message",
				},
				{
					content: "关于我们",
					path: "",
				},
			],
			username: "",
			user: {},
			name: "gogo",
			signatures: "山海为盟",
			userimg: "",
		};
	},
	created() {
		this.username = localStorage.getItem("loginName");
		if (JSON.parse(localStorage.getItem("userMessage"))) {
			this.user = JSON.parse(localStorage.getItem("userMessage"));
			this.name = this.user.name;
			this.signatures = this.user.signatures;
			this.userimg = this.user.userimg;
		}
	},
	methods: {
		goto(url) {
			this.$router.push(url);
		},
		logout() {
			// localStorageNaNpxoveItem("token");
			localStorage.clear();
			this.$router.push("/login");
		},
	},
};
</script>

<style lang="scss" scoped>
.minetop {
	margin: 0.13333333333333333rem;
	padding: 0.2rem;
	background: linear-gradient(90deg, #1baeae, #51c7c7);
	display: flex;
	align-items: center;
	border-radius: 0.13333333333333333rem;
	.imgs {
		width: 0.8rem;
	}
	.mines {
		padding-left: 0.26666666666666666rem;
		p {
			font-size: 0.21333333333333335rem;
			line-height: 1rem;
			margin-left: 4rem;
			color: #fff;
		}
	}
}
.minetwo {
	margin: 0rem 0.13333333333333333rem 0.13333333333333333rem;
	padding: 0.02666666666666667rem 0.02666666666666667rem;
	background-color: rgba($color: #a7f3f3, $alpha: 0.2);
	border-radius: 0.13333333333333333rem;
	.van-row {
		background-color: rgba($color: #8cf5f5, $alpha: 0.1);
		border-radius: 0.13333333333333333rem;
		.van-col {
			p {
				text-align: center;
			}
		}
	}
}
.minelast {
	margin: 0rem 0.13333333333333333rem;
	.van-list {
		.van-cell {
			font-size: 0.21333333333333335rem;
			border-bottom: 0.013333333333333334rem solid
				rgba($color: #555, $alpha: 0.1);
		}
	}
}
.van-button {
	margin: 0.26666666666666666rem 0.13333333333333333rem 0rem;
	width: calc(100% - 0.26666666666666666rem);
	// width: 100%;
	// padding: 0rem .13333333333333333rem;
	background-color: #1baeae;
}
</style>
